<template>
	<view class="sys-head-card">
		<view class="title">
			<view class="left">
				<icon class="ic-shiyanshi iconfont bs-shiyanshi" type=""></icon>
				<text>{{ item.name }}</text>
			</view>
			<view class="right dui" v-if="item.status == '1'">
				<text>可预约</text>
				<icon class="ic-dui iconfont bs-dui"></icon>
			</view>
			<view class="right cuo" v-if="item.status == '2'">
				<text>已约满</text>
				<icon class="ic-cuo iconfont bs-cuo"></icon>
			</view>
			<view class="right zanting" v-if="item.status == '3'">
				<text>未开放</text>
				<icon class="ic-cuo iconfont bs-cuo"></icon>
			</view>
			<view class="right guzhang" v-if="item.status == '4'">
				<text>维护中</text>
				<icon class="ic-guzhang iconfont bs-guzhang"></icon>
			</view>
			<view class="right jianshe" v-if="item.status == '5'">
				<text>建设中</text>
				<icon class="ic-jianshe iconfont bs-jianshe"></icon>
			</view>
		</view>

		<view class="bottom">
			<view class="info-row">
				<view class="label-container">
					<icon class="ic-weizhi iconfont bs-weizhi"></icon>
					<text class="label">位置:</text>
				</view>
				<text class="value">{{ item.ssxy + "-" + item.address }}</text>
			</view>
			<view class="info-row">
				<view class="label-container">
					<icon class="ic-shebei iconfont bs-shebei"></icon>
					<text class="label">可预约设备数量:</text>
				</view>
				<text class="value">{{ item.sbsl }}台</text>
			</view>
			<view class="info-row" v-if="item.detail">
				<view class="label-container">
					<icon class="ic-detail iconfont bs-detail"></icon>
					<text class="label">实验室简介:</text>
				</view>
				<text class="value">{{ item.detail }}</text>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
import {
	ref,
	reactive
} from 'vue'
import { onShow, onLoad } from '@dcloudio/uni-app'
const props = defineProps({
	item: {
		type: Object,
		default: {},
	},
})
</script>

<style lang="scss" scoped>
@import "/static/css/iconfont.css";

@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(10px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.sys-head-card {
	padding: 15px;
	border-radius: 12px;
	background-color: rgba(255, 255, 255, 0.95);
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
	animation: fadeIn 0.5s ease-out;
	transition: transform 0.3s ease, box-shadow 0.3s ease;

	.title {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 15px;

		.left {
			display: flex;
			align-items: center;

			.ic-shiyanshi {
				color: #2196f3;
				font-size: 24px;
			}

			text {
				font-size: 18px;
				margin-left: 8px;
				font-weight: bold;
				color: #333;
			}
		}

		.right {
			display: flex;
			align-items: center;
			padding: 4px 8px;
			border-radius: 4px;
			font-size: 12px;
			font-weight: bold;

			text {
				margin-right: 5px;
			}

			.ic-dui,
			.ic-cuo,
			.ic-jianshe,
			.ic-guzhang {
				font-size: 14px;
			}
		}

		.dui {
			background-color: #e7f6ec;
			color: #52c41a;
		}

		.cuo {
			background-color: #fff1f0;
			color: #f5222d;
		}

		.jianshe {
			background-color: #fef6e7;
			color: #f69c00;
		}

		.zanting {
			background-color: #f5f5f5;
			color: #9BA0AC;
		}

		.guzhang {
			background-color: #f5f5f5;
			color: #9BA0AC;
		}
	}

	.bottom {
		.info-row {
			display: flex;
			margin-bottom: 10px;
			font-size: 14px;

			&:last-child {
				margin-bottom: 0;
			}

			.label-container {
				display: flex;
				align-items: center;
				margin-right: 10px;

				.ic-weizhi,
				.ic-shebei,
				.ic-detail {
					font-size: 16px;
					color: #48d3cf;
					margin-right: 5px;
				}

				.label {
					color: #666;
				}
			}

			.value {
				color: #333;
				flex: 1;
			}
		}
	}
}
</style>